<template>
  <div class="Live_component">
    Live_component
    <button @click="increment">{{ num }}</button>
    <slot></slot>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
export default {
  setup () {
    const num = ref(0)
    const increment = () => num.value++
    onMounted(() => {
      console.log('App onMounted')
    })
    onUpdated(() => {
      console.log('App onUpdated')
    })
    onUnmounted(() => {
      console.log('App onUnmounted')
    })
    return {
      num,
      increment
    }
  }
}
</script>
<style scoped>
</style>
